<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			a{
				float: right;
				margin-right: 10px;
				color: #000000;
			}
			input{
				background: greenyellow;
			}
			#div1{
				width: 800px;
				height: 500px;
				border: 1px solid red;
				position: absolute;
				left: 100px;
				top: 100px;
				text-align: center;
			}
			#span1{
				float: left;
				font-size: 20px;
			}
			#span2{
				float: right;
			}
			#p{
				height: 50px;
				background: #ccc;
				line-height: 50px;
			}
		</style>
	</head>
	<script src="js/common.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		window.onload=function(){
			var a=Array.from(document.getElementsByTagName("a"));
			var div1=document.getElementById("div1");
			var span2=document.getElementById("span2");
			//点击显示
			for(var i in a){
				a[i].onclick=function(){
					div1.style.display="block";
				}
			}
			//点击关闭
			span2.onclick=function(){
					div1.style.display="none";
			}
			
			//拖拽
			var p=document.getElementById("p");
			p.onmousedown=function(event){
				var event=event||window.event;
				var mousex=event.offsetX;
				var mousey=event.offsetY;
				document.onmousemove=function(event){
					var event=event||window.event;
					div1.style.left=event.clientX-mousex+"px";
					div1.style.top=event.clientY-mousey+"px";
					var x=document.body.clientWidth||document.documentElement.clientWidth;//offsetWidth
					var y=document.body.clientHeight||document.documentElement.clientHeight;
					if(div1.offsetLeft>=(x-div1.offsetWidth)){
						div1.style.left=x-div1.offsetWidth+"px";
					}
					if(div1.offsetLeft<=0){
						div1.style.left=0+"px";
					}
					if(div1.offsetTop>=(y-div1.offsetHeight)){
						div1.style.top=y-div1.offsetHeight+"px";
					}
					if(div1.offsetTop<=0){
						div1.style.top=0+"px";
					}
				}
				document.onmouseup=function(){
					document.onmousemove="";					
				}
			}	
		}
	</script>
	<body>
		<a href="#">糯米</a>
		<a href="#">新闻</a>
		<a href="#">hao123</a>
		<a href="#">地图</a>
		<a href="#">视频</a>
		<div id="div1">
			<p id="p">
				<span id="span1">登录百度账号</span>
				<span id="span2">点击关闭</span>
			</p>
			用户：<input type="text" id="username"/ ><br>
			密码：<input type="password" id="pwd"/ >
		</div>
	</body>
</html>
